<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
			<el-input class="filter-item" @keyup.enter.native="handleFilter" style="width: 200px;"  placeholder="请输入关键词" v-model="search.keyword"></el-input>
      <div class="filter-item">
      	<span class="txt">到期时间</span>
		    <el-date-picker
		    	style="width: 240px;"
		    	value-format="timestamp"
		      v-model="search.date"
		      type="daterange"
		      range-separator="-"
		      start-placeholder="开始日期"
		      end-placeholder="结束日期">
		    </el-date-picker>
	    </div>
	    <div class="filter-item">
			  <el-select v-model="search.auditMode" placeholder="审核模式" style="width:150px">
			    <el-option
			      v-for="item in [{value: -1,label: '全部'}, {value: 0, label: '运营模式'}, {value: 1,label: '审核模式'}]"
			      :key="item.value"
			      :label="item.label"
			      :value="item.value">
			    </el-option>
			  </el-select>
		  </div>
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
    </div>
    <el-table
       v-loading="!pload"
        ref="multipleTable"
        border
        :data="tableData"
       >
        <el-table-column
          label="序号"
          align="center"
          show-overflow-tooltip
          width="55"
          >
          <template slot-scope="scope">
						{{scope.$index * currentPage + 1}}
          </template>
        </el-table-column>
        <el-table-column
          property="appletName"
          label="小程序名称"
          show-overflow-tooltip
          >
        </el-table-column>
        <el-table-column
          label="关联时间"
          align="center"
          width="180"
          show-overflow-tooltip
          >
          <template slot-scope="scope">
						{{scope.row.associateTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          align="center"
          width="180"
          show-overflow-tooltip
          >
          <template slot-scope="scope">
						{{scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}
          </template>
        </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
      :page-size="limit"
      :page-sizes="limits"
      background
      layout="sizes, prev, pager, next, jumper, total"
      :total="count">
      </el-pagination>
    </div>
  </div>
</template>

<script>
    import {weOwnApplet} from '@/utils/weApi'
    import waves from '@/directive/waves' // 水波纹指令
    export default {
      directives: {
        waves
      },
      data(){
          return {
            tableData: [],
            search: {
              keyword: ''
            },
            selection: [],
            selectTable: {},
            pload: false,
            currentPage:1,
            limit: 20,
            limits: [10,20,50,100],
            count:0,
          }
      },
      components: {
      },
      created(){
         this.getData()
      },
      methods: {
        async getData(){
          if (this.search.date) {
            this.search.createTimeStart = this.search.date[0]
            this.search.createTimeEnd = this.search.date[1]
          } else {
            delete this.search.createTimeStart
            delete this.search.createTimeEnd
          }
          let data = this.JSONo(
	          {
	          	status:0,
	            pageNum: this.currentPage,
	            pageSize: this.limit
	          },
          	this.search
          )
          this.pload = false
          const Datas = await weOwnApplet(data)
          this.tableData = Datas.data
          this.count = Datas.pageInfo.total
          this.pload = true
        },
        handleFilter () {
          this.getData()
        },
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`)
          this.limit = val
          this.getData()
        },
        handleCurrentChange(val) {
          this.currentPage = val
          this.getData()
        }
      }
    }
</script>
